@startuml
  title Диаграмма отправки сообщений и получения сообщений между компонентами

  frame "Компоненты расширения" {
    frame "Options Tab" as OPTIONS_FRAME {
      component [options.js] as options
    }
    frame "Popup Menu" as POPUP_FRAME {
      component [popup.js] as popup
    }
    frame "DevTools" as DEVTOOLS_FRAME {
      component [devtools.js] as devtools_script
      frame "DevTools" as DEVTOOLS_PANELS {
        component [panel.js] as panel_script
        component [panels_elements.js] as panels_elements_script
        component [panels_sources.js] as panels_sources_scrip
      }
    }
    component [background.js] as background
    portout pout_cr as "chrome.runtime.sendMessage()"
    portin pin_cr as "chrome.runtime.onMessage.addListener()"
  }

  background --> pout_cr : 1
  options --> pout_cr : 1
  popup --> pout_cr : 1
  devtools_script --> pout_cr : 1
  panel_script --> pout_cr : 1
  panels_elements_script --> pout_cr : 1
  panels_sources_scrip --> pout_cr : 1

  pout_cr --> pin_cr: 2 Отправка запроса

  pin_cr --> background: 3
  pin_cr --> options: 3
  pin_cr --> popup: 3
  pin_cr --> devtools_script : 3
  pin_cr --> panel_script : 3
  pin_cr --> panels_elements_script : 3
  pin_cr --> panels_sources_scrip: 3

@enduml